<script setup lang="ts">
import Request from '@/api/axios'
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
// @ts-ignore
import MarkdownEditor from '@/components/Markdown/MarkdownEditor.vue'
import TagGroup from '@/components/TagGroup.vue'
import { BlogStore } from '@/stores/blogcache'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
import { message } from 'ant-design-vue'
import { HttpStatusCode } from 'axios'

const blogStore = BlogStore()
const { addCache, getCache, resetCache } = blogStore
const user = useUserStore()
const { id, username } = storeToRefs(user)
interface Form {
    title: string
    region: string
    date: string
    context: string
    isPrivate: boolean
    dynamicTags: string[]
}
const form: Form = reactive({
    title: '',
    region: 'algo',
    date: '',
    context: '',
    isPrivate: false,
    dynamicTags: []
})
watch(
    form,
    (newVal) => {
        addCache('title', newVal.title)
        addCache('region', newVal.region)
        addCache('date', newVal.date)
        addCache('context', newVal.context)
        addCache('tags', newVal.dynamicTags)
        addCache('isPrivate', newVal.isPrivate)
    },
    { deep: true }
)
onMounted(() => {
    form.dynamicTags = getCache('tags') ?? []
    form.title = getCache('title') ?? ''
    form.region = getCache('region') ?? ''
    form.date = getCache('date') ?? ''
    form.context = getCache('context') ?? ''
    form.isPrivate = getCache('isPrivate') ?? false
})
const onSubmit = async () => {
    await Request.post({
        url: '/blog/create',
        data: {
            userID: id.value,
            title: form.title,
            region: form.region,
            context: form.context,
            isPrivate: form.isPrivate ? true : false,
            tags: JSON.stringify(form.dynamicTags)
        }
    })
        .then((response) => {
            if (response.code == HttpStatusCode.Ok) {
                message.success('发布成功')
                resetCache()
            } else {
                message.error('发布失败')
                console.log(response.msg)
            }
        })
        .catch((err) => {
            message.error('发布失败')
            console.log(err)
        })
        .finally(() => { })
}

const showInput = () => {
    inputVisible.value = true
    nextTick(InputRef.value?.focus)
}
const inputValue = ref('')
const inputVisible = ref(false)
const InputRef = ref()
const handleInputConfirm = () => {
    if (inputValue.value) {
        form.dynamicTags.push(inputValue.value)
    }
    inputVisible.value = false
    inputValue.value = ''
}
</script>

<template>
    <div class="blog-create-container">
        <a-row :gutter="16" class="header-row">
            <a-col :span="18">
                <a-input
                    v-model:value="form.title"
                    placeholder="请输入标题"
                    class="title-input"
                />
            </a-col>
            <a-col :span="6">
                <a-button
                    type="primary"
                    class="submit-button"
                    @click="onSubmit"
                >
                    创建
                </a-button>
            </a-col>
        </a-row>
        <a-row :gutter="16" class="options-row">
            <a-col :span="12">
                <TagGroup :tags="form.dynamicTags" />
            </a-col>
        </a-row>
        <div class="switch-row">
            <a-switch
                v-model:checked="form.isPrivate"
                checked-children="私有"
                un-checked-children="公开"
            />
        </div>
        <div class="editor-container">
            <MarkdownEditor
                v-model="form.context"
                mode="edit"
                class="markdown-editor"
            />
        </div>
    </div>
</template>

<style scoped>
.blog-create-container {
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.header-row {
    margin-bottom: 16px;
}

.title-input {
    border-radius: 20px;
    height: 40px;
    font-size: 16px;
    padding: 0 16px;
}

.submit-button {
    font-weight: bold;
    font-size: 16px;
    border-radius: 20px;
    width: 100%;
    height: 40px;
}

.options-row {
    margin-bottom: 16px;
}

.region-select {
    width: 100%;
    border-radius: 8px;
}

.switch-row {
    margin-bottom: 16px;
    text-align: right;
}

.editor-container {
    margin-top: 16px;
    /* background: #ffffff; */
    /* border-radius: 8px; */
    padding: 16px;
    /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.markdown-editor {
    width: 100%;
    height: 600px;
}
</style>